<!DOCTYPE html>
<html lang="en">

<head>
    <title>订课记录_加华教育订课系统</title>
    <#include "/jh/app/components/meta.html" />
    <#include "/jh/app/components/stylesheets.html" />
    <link rel="stylesheet" href="/jh/app/stylesheets/myCourse.css?v=1">
</head>

<body>
    <div id="app">
        <div class="list">
            <div class="am-g am-g-collapse item" v-for="(item, index) in list" v-key="item.id">
                <div class="am-u-sm-7 item-left">
                    <div class="title">{{ item.name }}</div>
                    <div class="subtitle">{{ item.topic }}</div>
                    <div class="info">{{ item.startTime }}~{{ item.endTime }} | {{ item.tags }}</div>
                </div>
                <div class="am-u-sm-5 item-right">
                    <div class="location"><i class="am-icon-map-marker"></i>&nbsp;{{ item.schoolName }}</div>
                    <div class="teacher" v-if="item.staffEngName != null">{{ item.staffEngName }}</div>
                    <div class="teacher" v-else-if="item.staffName != null">{{ item.staffName }}</div>
                    <div class="teacher" v-else-if="item.partTimeTeacherName != null">{{ item.partTimeTeacherName }}</div>
                    <div class="button-wrap">
                        <template v-if='item.isOnClass == 1'>
                            <button class="am-btn" style="background-color: gray">已上课</button>
                        </template>
                        <template v-if='item.isOnClass == 0'>
                            <button class="am-btn theme-background-color2" v-if="item.status == 1" @click="unsubscribe(item.name + ' ' + item.topic, item.id)">退订</button>
                            <button class="am-btn" style="background-color: #A0D468!important" v-else @click="subscribe(item.name + ' ' + item.topic, item.id)">+订课</button>
                        </template>
                    </div>
                </div>
            </div>
            <a type="button" class="am-btn am-btn-primary am-btn-block" href="/jh/app/history?page=${(page!1)+1}" v-if='list.length == 50'>下一页</a>
        </div>
    </div>
    <#include "/jh/app/components/scripts.html" />
    <script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data() {
            return {
                list: []
            }
        },
        mounted: function() {
            var jsonStr = '${list!}';
            if (jsonStr != '') {
                this.list = JSON.parse(jsonStr);
            }
        },
        methods: {
            subscribe(name, id) {
                confirm("您确定要订课 " + name + " 吗？", "订课", function() {
                    var param = Qs.stringify({
                        arrangeId: id
                    });
                    axios({
                            url: '/jh/app/submit',
                            method: 'post',
                            data: param,
                            headers: {
                                'Content-Type': 'application/x-www-form-urlencoded'
                            }
                        })
                        .then(function(response) {
                            endLoading();
                            if (response.data.status == 200) {
                                remind("订课成功", function() {
                                    window.location.href = "/jh/app/mine";
                                });
                            } else if (response.data.status == 204) {
                                msg(response.data.msg);
                                console.log(response.data);
                            } else {
                                msg("提交失败");
                                console.log(response.data);
                            }
                        })
                        .catch(function(error) {
                            endLoading();
                            msg("提交失败");
                            console.log(error);
                        });
                })
            },
            unsubscribe(name, id) {
                confirm("您确定要退订 " + name + " 吗？", "退订", function() {
                    MtaH5.clickStat("app_cancel_course")
                    var param = Qs.stringify({
                        arrangeId: id
                    });
                    loading();
                    axios({
                            url: '/jh/app/cancel',
                            method: 'post',
                            data: param,
                            headers: {
                                'Content-Type': 'application/x-www-form-urlencoded'
                            }
                        })
                        .then(function(response) {
                            endLoading();
                            if (response.data.status == 200) {
                                remind("退订成功", function() {
                                    // window.location.href = "/jh/app/list?date=${date!}";
                                    window.location.reload()
                                });
                            } else if (response.data.status == 204) {
                                msg(response.data.msg);
                                // console.log(response.data);
                            } else {
                                msg("提交失败");
                                // console.log(response.data);
                            }
                        })
                        .catch(function(error) {
                            endLoading();
                            msg("提交失败");
                            // console.log(error);
                        });
                })
            }
        }
    })
    </script>
    <script>
    // wx.ready(function() {
    //     initWXShare()
    // })
    </script>
</body>

</html>